<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{
				width:200px;
				margin:0 10px;
			}
			body{
				background:url(img/change/2.jpg) no-repeat;
			}
			div{
				height: 160px;
				padding-top:25px;
				background: rgba(255,255,255,0.3);
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
	        <img src="img/change/1.jpg" alt="" />
	        <img src="img/change/2.jpg" alt="" />
	        <img src="img/change/3.jpg" alt="" />
	        <img src="img/change/4.jpg" alt="" />
	        <img src="img/change/5.jpg" alt="" />
	   </div>
	   <script>
	   		var box = document.getElementsByTagName("div")[0];
	   		var body = document.body;
	   		var imgArr = box.children;
	   		for(var i = 0; i<imgArr.length;i++)
	   		{
	   			imgArr[i].onclick = function(){
	   				body.style.backgroundImage = "url("+this.src+")";
	   			}
	   		}
	   </script>
	</body>
</html>
